<!DOCTYPE html>

<!--
  An example of how to use the otp.js RequestFormWidget() to embed an
  interactive search widget in a third-party page.
-->

<html>
  <head>
    <title>otp.js Widget Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Content-Language" content="en">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">

    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>

    <!-- Begin Search Form

      The OTP search form should be contained within an element (the
      "container") which will be passed in to the otp.js RequestFormWidget()
      utility, invoked by the inline JS snippet at the end of this page.

      Within the container, the following class tags can be applied to
      elements as described below to indicate to RequestFormWidget() that
      they are part of an OTP search form:

      otp-from-place : an <input> element for the "from" location. Will be
        turned into a Select2 dropdown widget w/ geocoding support based on
        the external otp.js config settings
      otp-to-place : same as above, for the "to" location
      otp-arrive-by : a <select> element; value should be true for "arrive
        by" searches, false for "depart at" searches
      otp-time-picker : a <div> element tagged as an input-group; will be
        turned into a Bootstrap 2 DateTimePicker for the OTP search time.
        Element should include a child <input> element for the date value
      otp-date-picker : same as above, for the search date

    -->

    <div class="container otp-widget">

      <!-- From Place Selector -->
      <div class="form-group">
        <div class="col-sm-12">
          <input class="form-control otp-from-place" placeholder="Start Address">
        </div>
      </div>

      <!-- To Place Selector -->
      <div class="form-group">
        <div class="col-sm-12">
          <input id="toPlace" class="form-control otp-to-place" placeholder="End Address">
        </div>
      </div>

      <div class="form-group">

        <!-- Depart/Arrive Dropdown -->
        <div class="col-sm-6">
          <select class="form-control otp-arrive-by">
            <option value="true">Arrive by</option>
            <option value="false" selected>Depart at</option>
          </select>
        </div>

        <!-- Time Picker -->
        <div class="col-sm-6">
          <div class="input-group date otp-time-picker" id="time">
            <input type="text" class="form-control" data-format="HH:mm PP">
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-time"></span>
            </span>
          </div>
        </div>
      </div>

      <!-- Date Picker -->
      <div class="form-group">
        <div class="col-sm-12">
          <div class="input-group date otp-date-picker" id="date">
            <input type="text" class="form-control">
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-time"></span>
            </span>
          </div>
        </div>
      </div>

      <!-- Search Button -->
      <div class="form-group col-sm-12">
        <button class="otp-search-button btn btn-primary btn-block">Submit <span class="glyphicon glyphicon-search"></span></button>
      </div>
    </div>

    <!-- End Search Form -->

    <!-- Otp.js JS Dependencies -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.0/jquery.xdomainrequest.min.js"></script>
    <![endif]-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>

    <!-- Otp.js JS Includes from your main otp.js deployment -->

    <script src="config.js?build=20141208.02"></script>
    <script src="build/build.js?build=20141208.02"></script>


    <!-- JS Form Initialization -->
    <script>
    $(document).ready(function () {
      var OTP = require('otpjs')

      // The otp.js RequestFormWidget is created with two options:
      // 1. the element containing the OTP search form above
      // 2. the base URL for your otp.js client
      var widget = new OTP.RequestFormWidget({
        el: $('.otp-widget'),
        urlBase: 'http://localhost' // replace with your otp.js client url
      })
    })
    </script>

  </body>
</html>
